<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- Tell the browser to be responsive to screen width -->
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/ionicons.min.css">
		<link rel="stylesheet" href="css/toastr.min.css" />
		<link rel="stylesheet" href="css/easyui/themes/bootstrap/easyui.css" />
		<link rel="stylesheet" href="css/easyui/themes/icon.css" />
		<link rel="stylesheet" href="css/omain.css" />
		<!-- Google Font -->
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
		<link rel="stylesheet" href="css/sidemenu.css" />
		<title></title>
	</head>
	<body id="cc" class="easyui-layout">
		<div data-options="region:'west',border:false,width:230" style="background: #222D32; overflow-y: visible ;">
			<div data-options="region:'north'" style="height: 96px;display: flex; flex-direction: row; justify-content: center; align-items: center;">
				<img src="img/logo.png" style="max-height: 32px;" />
			</div>
			<div data-options="region:'center'">
				<div id="menu" class='easyui-sidemenu' data-options='data:data,onSelect:onSideMenuSelect,border:false' style="width: 230px;"></div>
			</div>
		</div>

		<div data-options="region:'center',border:false" class="easyui-layout">
			<div data-options="region:'north',border:false,collapsible:false" class="centerheader">
				<div class="left-menu-toggle">
					<a href="javascript:void(0)" class="setting">
						<span class="fa fa-lg fa-cog fa-white" ></span>
					</a>
					<ul class="left-menu-setting">
						<li class="left-menu-item" onclick="onExitClick()">
							<span class="fa fa-lg fa-black-tie left-menu-item-icon"></span>退出
						</li>
						<li class="left-menu-item" onclick="onExitClick()">
							<span class="fa fa-lg fa-cog left-menu-item-icon"></span>设置
						</li>
						<li class='menu-item-split'></li>
					</ul>
					
				</div>
				
				<div style="margin-right: 16px;">
					<a href="javascript:;" class="coowalt-bars fa fa-bars" onclick="menuToggle()"></a>
				</div>
				<span class="title">Wealt</span>
			</div>
			<div data-options="region:'center',border:false">
				<div id="tt" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
					<div title="首页"></div>
				</div>
			</div>
		</div>

		<!-- jQuery 3 -->
		<script src="js/jquery.min.js"></script>
		<!-- Bootstrap 3.3.7 -->
		<script src="js/bootstrap.min.js"></script>
		<script src="js/toastr.min.js"></script>

		<script src="js/easyui/jquery.easyui.min.js"></script>
		<script src="js/easyui/easyui-lang-zh_CN.js"></script>
		<script src="js/tabs.js"></script>
		<script type="text/javascript">
			
			$(function() {
				$("body").click(function(){
					$(".left-menu-setting").slideUp();
				});
				$(".left-menu-toggle .setting").click(function(e) {
					$(".left-menu-setting").slideToggle();
					e.stopPropagation();
				});
				$(".left-menu-setting").click(function(e) {
						e.stopPropagation();
				})
			})
			
			function onSideMenuSelect(item) {
				addTab(item.text, item.url);
			}

			function settingToggle(event) {
				$(".left-menu-setting").slideToggle();
				 event.stopPropagation();    //  阻止事件冒泡
			}
			
			function onExitClick() {
				$(".left-menu-setting").slideUp();
			}
			
			function menuToggle() {
				var opts = $('#menu').sidemenu('options');
				$('#menu').sidemenu(opts.collapsed ? 'expand' : 'collapse');

				$('#cc').layout("panel", "west").panel('resize', {
					width: opts.collapsed ? 60 : 230
				})

				$('#cc').layout("panel", "center").panel('resize', {
					width: '100%',
					left: opts.collapsed ? 60 : 230
				})


				opts = $('#menu').sidemenu('options');
				$('#menu').sidemenu('resize', {
					width: opts.collapsed ? 60 : 230
				})

				$(".easyui-layout").layout('resize', {
					width: '100%',
					height: '100%',
				});
			}

			var data = [{

				text: 'Datagrids',
				iconCls: 'fa fa-white fa-bar-chart',
				children: [{
					text: 'Base',
					url: 'http://www.baidu.com',
					iconCls: 'icon-circle-o',

				}, {
					text: 'Editable',
					iconCls: 'icon-circle-o'
				}]
			}]
		</script>

	</body>
</html>
